<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet">
  <link href="./generate.css" rel="stylesheet">
  <title>效率桌面壁纸</title>
</head>
<body>
  <section class="hero is-info">
    <div class="hero-body">
      <div class="container">
        <h1 style="text-align: center;font-size: 30px">可配置生成效率桌面</h1>
        <p style="text-align:center;color: orange;font-weight: bold">[温馨提示]:为保证效果，请将浏览器窗口调整至最大化～</p>
      </div>
    </div>
  </section>
  <div class="box cta">
    <div class="columns is-mobile is-centered" style="padding: 10px 0">
      <div class="field is-grouped is-grouped-multiline" style="flex-direction:column;align-items:center">
        <div class="control">
          <a onclick="previewDesktop()" class="button is-success">生成预览</a>
          <a onclick="generateDesktop()" class="button is-danger">点击下载</a>
        </div>
        <div class="control" style="display:flex;justify-content: center;flex-wrap:wrap">
          <div>屏幕宽：<input type='text' value='' onchange="getScreenParam(this, 'width')" />px</div>
          <div>屏幕高：<input type='text' value='' onchange="getScreenParam(this, 'height')" />px</div>
        </div>
        <div class="control" style="font-size: 0.8em;color:red">
          [提示]：如不填写，系统会按照浏览器最大化窗口为您自动匹配电脑屏幕分辨率～
        </div>
      </div>
    </div>
  </div>
  <section class="container">
    <div class="columns is-mobile is-centered" id="sectioncontainer" style="width: 100%;flex-wrap:wrap;padding-bottom: 40px">
      <div class="column is-narrow">
        <article class="message is-info">
          <div class="message-header">
            <p>四格型</p>
            <span name='table' onclick="changeSelectType('table')" class="checkbox checkbox-selected"></span>
          </div>
          <div class="message-body four-table" style="background-color: #209cee;opacity: 0.6;">
            <div class="table-content table-content-1">
              <input type='text' value='应用' onblur='inputTextChange(this, "table", 1)' />
              <input type="color" value='#ffc0cb' onchange='inputColorChange(this, "table", 1)' style="width:50%" />
            </div>
            <div class="table-content table-content-2">
              <input type='text' value='文档' onchange='inputTextChange(this, "table", 2)' />
              <input type="color" value='#00bfff' onchange='inputColorChange(this, "table", 2)' style="width:50%" />
            </div>
            <div class="table-content table-content-3">
              <input type='text' value='已完成' onchange='inputTextChange(this, "table", 3)' />
              <input type="color" value='#40e0d0' onchange='inputColorChange(this, "table", 3)' style="width:50%" />
            </div>
            <div class="table-content table-content-4">
              <input type='text' value='未完成' onchange='inputTextChange(this, "table", 4)' />
              <input type="color" value='#ffdd57' onchange='inputColorChange(this, "table", 4)' style="width:50%" />
            </div>
          </div>
        </article>
      </div>
      <div class="column is-narrow">
        <article class="message is-warning">
          <div class="message-header">
            <p style="color:#fff">四行型</p>
            <span name='row' onclick="changeSelectType('row')" class="checkbox"></span>
          </div>
          <div class="message-body four-row" style="background-color: #ffdd57;opacity: 0.6;">
            <div class="row-content row-content-1">
              <input type='text' value='应用' onblur='inputTextChange(this, "row", 1)' />
              <input type="color" value='#ffc0cb' onchange='inputColorChange(this, "row", 1)' style="width:20%" />
            </div>
            <div class="row-content row-content-2">
              <input type='text' value='文档' onblur='inputTextChange(this, "row", 2)' />
              <input type="color" value='#00bfff' onchange='inputColorChange(this, "row", 2)' style="width:20%" />
            </div>
            <div class="row-content row-content-3">
              <input type='text' value='已完成' onblur='inputTextChange(this, "row", 3)' />
              <input type="color" value='#40e0d0' onchange='inputColorChange(this, "row", 3)' style="width:20%" />
            </div>
            <div class="row-content row-content-4">
              <input type='text' value='未完成' onblur='inputTextChange(this, "row", 4)' />
              <input type="color" value='#ffdd57' onchange='inputColorChange(this, "row", 4)' style="width:20%" />
            </div>
          </div>
        </article>
      </div>
      <div class="column is-narrow">
        <article class="message is-primary">
          <div class="message-header">
            <p>四列型</p>
            <span name='column' onclick="changeSelectType('column')" class="checkbox"></span>
          </div>
          <div class="message-body four-column" style="background-color: #00d1b2;opacity: 0.6;">
            <div class="column-content column-content-1">
              <input type='text' value='应用' onblur='inputTextChange(this, "column", 1)' />
              <input type="color" value='#ffc0cb' onchange='inputColorChange(this, "column", 1)' style="width:80%" />
            </div>
            <div class="column-content column-content-2">
              <input type='text' value='文档' onblur='inputTextChange(this, "column", 2)' />
              <input type="color" value='#00bfff' onchange='inputColorChange(this, "column", 2)' style="width:80%" />
            </div>
            <div class="column-content column-content-3">
              <input type='text' value='已完成' onblur='inputTextChange(this, "column", 3)' />
              <input type="color" value='#40e0d0' onchange='inputColorChange(this, "column", 3)' style="width:80%" />
            </div>
            <div class="column-content column-content-4">
              <input type='text' value='未完成' onblur='inputTextChange(this, "column", 4)' />
              <input type="color" value='#ffdd57' onchange='inputColorChange(this, "column", 4)' style="width:80%" />
            </div>
          </div>
        </article>
      </div>
    </div>
  </section>
  <footer style="position: fixed;;width:100%;bottom:0">
    <div class="box cta">
      <div class="columns is-mobile is-centered">
        <div class="field is-grouped is-grouped-multiline">
          <div class="control">
            <div class="tags has-addons">
              <a target="_blank" class="tag is-info" href="https://lruihao.cn">
                @modified lruihao
              </a>
              <a target="_blank" class="tag is-black" href="https://github.com/Lruihao/effective-bg">
                Go to look⭐️
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <div id='preview-table' class="table-desktop preview" style="display: none">
    <div class="table-content"></div>
    <div class="table-content"></div>
    <div class="table-content"></div>
    <div class="table-content"></div>
  </div>
  <div id='preview-row' class="row-desktop preview" style="display: none">
    <div class="row-content" style="height:25%"></div>
    <div class="row-content" style="height:25%"></div>
    <div class="row-content" style="height:25%"></div>
    <div class="row-content" style="height:25%"></div>
  </div>
  <div id='preview-column' class="column-desktop preview" style="display: none">
    <div class="column-content"></div>
    <div class="column-content"></div>
    <div class="column-content"></div>
    <div class="column-content"></div>
  </div>
  <div id='download-table' class="table-desktop download">
    <div class="table-content"></div>
    <div class="table-content"></div>
    <div class="table-content"></div>
    <div class="table-content"></div>
  </div>
  <div id='download-row' class="row-desktop download">
    <div class="row-content" style="height:25%"></div>
    <div class="row-content" style="height:25%"></div>
    <div class="row-content" style="height:25%"></div>
    <div class="row-content" style="height:25%"></div>
  </div>
  <div id='download-column' class="column-desktop download">
    <div class="column-content"></div>
    <div class="column-content"></div>
    <div class="column-content"></div>
    <div class="column-content"></div>
  </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/javascript-canvas-to-blob/3.14.0/js/canvas-to-blob.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<script src="./generate.js"></script>
</html>

